<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .T09803 {
    position: relative;
    top: 200px;
    left: 200px;
    width: 300px;
    height: 300px;
    background-color: #ccc;
    border-radius: 50%;
}

.p {
    position: absolute;
    box-sizing: border-box;
    left: 150px;
    top: -150px;
    width: 300px;
    height: 300px;
    border-bottom: 1px solid red;
    transform-origin:left bottom;
    animation-fill-mode: forwards;
    /* background-color: bisque; */
}
/* .p:nth-child(odd) {
    background-color: aqua;
} */
.p1 {
    transform: rotate(0deg) skew(-30deg);
    animation: p1 4s linear normal forwards;
}
.p2 {
    transform: rotate(60deg) skew(-30deg);
    animation: p2 2s linear forwards;
}
.p3 {
    transform: rotate(120deg) skew(-30deg);
    animation: p3 2s linear forwards;
}
.p4 {
    transform: rotate(180deg) skew(-30deg);
    animation: p4 2s linear forwards;
}
.p5 {
    transform: rotate(240deg) skew(-30deg);
    animation: p5 2s linear forwards;
}
.p6 {
    transform: rotate(300deg) skew(-30deg);
    animation: p6 2s linear forwards;
}
/* 
    a:旋转角度
    n:扇形个数
    p:第几个扇形
    c:原扇形角度
    (c + a) - (a / n-1) * p
*/
@keyframes p1 {
    from {
        transform: rotate(0deg) skew(-30deg);
    }
    to {
        transform: rotate(0deg) skew(-30deg);
    }
}
@keyframes p2 {
    from {
        transform: rotate(60deg) skew(-30deg);
    }
    to {
        transform: rotate(120deg) skew(-30deg);
    }
}
@keyframes p3 {
    from {
        transform: rotate(120deg) skew(-30deg);
    }
    to {
        transform: rotate(168deg) skew(-30deg);
    }
}
@keyframes p4 {
    from {
        transform: rotate(180deg) skew(-30deg);
    }
    to {
        transform: rotate(216deg) skew(-30deg);
    }
}
@keyframes p5 {
    from {
        transform: rotate(240deg) skew(-30deg);
    }
    to {
        transform: rotate(264deg) skew(-30deg);
    }
}
@keyframes p6 {
    from {
        transform: rotate(300deg) skew(-30deg);
    }
    to {
        transform: rotate(312deg) skew(-30deg);
    }
}
</style>
<body>
    
    <div class="T09803">
        <div class="p p1">1</div>
        <div class="p p2">2</div>
        <div class="p p3">3</div>
        <div class="p p4">4</div>
        <div class="p p5">5</div>
        <div class="p p6">6</div>
    </div>
</body>
</html>

